<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>分配按钮</title>
</head>
 <body>
 <script type="text/javascript">
 	var winAssignButton = new Windows("assign_button");
 	$(function(){
 		initDataGrid();
 		initSelectTool();
 	});
 	function initDataGrid(){
 		winAssignButton.find("#dgOptionalButtons").datagrid({
 				title:'可选按钮',
 				iconCls:'icon-button-add',
 				autoRowHeight: false,
				url:'$!basePath/admin/button/btnListForResource',
				border:true,
				fit:true,
				idField:'name',
				animate:true,
				singleSelect:false,
				frozenColumns:[[
	                {field:'ck',checkbox:true},
				]],
				columns:[[	
					{field:'icon',title:'图标',width:40,formatter:function(value,row,index){
						value = "<center><span style='padding-top:2px' class='"+value+"'\>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></center>"
						return value;
					}},		
					{field:'name',title:'按钮名称',width:110,sortable:true
						,formatter:function(value,row,index){
							return highShowSearch(winAssignButton.find("#dgOptionalButtons"),"name",value);
						}
					}
				]],
				rownumbers:true,
				toolbar:'#dgOptionalButtons-toolbar',
				queryParams:{
					isEq:false,
					ids:'$!btnIds'
				},
				onDblClickRow:function(rowIndex,rowData){
					var lDg = winAssignButton.find("#dgOptionalButtons");//左边表格
 					var rDg = winAssignButton.find("#dgSelectButtons");//右边表格
 					lDg.datagrid("deleteRow",rowIndex);
 					rDg.datagrid("appendRow",rowData);
				}
 		});
 		winAssignButton.find("#dgSelectButtons").datagrid({
 				title:'已选按钮',
 				iconCls:'icon-button-edit',
 				autoRowHeight: false,
				url:'$!basePath/admin/button/btnListForResource',
				border:true,
				fit:true,
				idField:'name',
				animate:true,
				singleSelect:false,
				frozenColumns:[[
	                {field:'ck',checkbox:true},
				]],
				columns:[[
					{field:'icon',title:'图标',width:40,formatter:function(value,row,index){
						value = "<center><span style='padding-top:2px' class='"+value+"'\>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></center>"
						return value;
					}},		
					{field:'name',title:'按钮名称',width:110,sortable:true
						,formatter:function(value,row,index){
							return highShowSearch(winAssignButton.find("#dgSelectButtons"),"name",value);
						}
					}
				]],
				rownumbers:true,
				toolbar:'#dgSelectedButtons-toolbar',
				queryParams:{
					isEq:true,
					ids:'$!btnIds'
				},
				onDblClickRow:function(rowIndex,rowData){
					var lDg = winAssignButton.find("#dgOptionalButtons");//左边表格
 					var rDg = winAssignButton.find("#dgSelectButtons");//右边表格
 					rDg.datagrid("deleteRow",rowIndex);
 					lDg.datagrid("appendRow",rowData);
				}
 		});
 	}
 	function initSelectTool(){
 		//移除
 		winAssignButton.find("#btnLeft").click(function(){
 			var lDg = winAssignButton.find("#dgOptionalButtons");//左边表格
 			var rDg = winAssignButton.find("#dgSelectButtons");//右边表格
 			
 			var selectRows = rDg.datagrid("getSelections");
 			var rAllRows = rDg.datagrid("getRows");
 			var rRows = new Array();
 			if(selectRows.length>0){
 				$.each(selectRows,function(i,row){
 					lDg.datagrid("appendRow",row);
 				});
 				var unSelectedRows = DataGridUtil.getUnSelectedRows(rDg);
 				//移除所有的行
 				$.each(rAllRows,function(i,row){
 					rDg.datagrid("deleteRow",0);
 				});
 				//添加为选中的行
 				$.each(unSelectedRows,function(i,row){
 					rDg.datagrid("appendRow",row);
 				});
 				
 			}
 		});
 		//选中
 		winAssignButton.find("#btnRight").click(function(){
 			var lDg = winAssignButton.find("#dgOptionalButtons");//左边表格
 			var rDg = winAssignButton.find("#dgSelectButtons");//右边表格
 			var selectRows = lDg.datagrid("getSelections");
 			var rAllRows = lDg.datagrid("getRows");
 			if(selectRows.length>0){
 				$.each(selectRows,function(i,row){
 					rDg.datagrid("appendRow",row);
 				});
 				//获取未选中的行
 				var unSelectedRows = DataGridUtil.getUnSelectedRows(lDg);
 				//先移除所有行
 				$.each(rAllRows,function(i,row){
 					lDg.datagrid("deleteRow",0);
 				});
 				//添加未选中的行
 				$.each(unSelectedRows,function(i,row){
 					lDg.datagrid("appendRow",row);
 				});
 			}
 		});
 	}
 	//可选按钮搜索方法
 	function doSearch1(v,n){
 		doDataGridSearch("dgOptionalButtons",n,v);
 	}
 	//已选按钮搜索方法
 	function doSearch2(v,n){
 		doDataGridSearch("dgSelectButtons",n,v);
 	}
	function ok(){
		var ids = new Array();
  		var rDg = winAssignButton.find("#dgSelectButtons");//右边表格
		var rows = rDg.datagrid("getRows");
		$.each(rows,function(i,row){
			ids.push(row.id);
		});
		$.post("$!basePath/admin/res/doAssignButton",{resId:$!resId,btnIds:ids.toString()},function(data){
			if(data.isSaved){
				top.Notiy.success("按钮分配成功!");
				winAssignButton.setReturnValue(true);
				winAssignButton.close();
			}
		},"json")
  	}
  	function cancel(){
  		winAssignButton.close();
  	}
 </script>
 <div class="easyui-layout" data-options="fit:true">
 	 <div data-options="region:'west',border:false" style="width:225px;padding:5px;background:#fff;">
	 	<table id="dgOptionalButtons"></table>
	 </div>
	 <div data-options="region:'east',border:false" style="width:225px;padding:5px;background:#fff;">
	 	<table id="dgSelectButtons"></table>
	 	<input type="hidden" name="selectedButtonIds" value="$!btnIds"/>
	 </div>
	 <div data-options="region:'center',border:false" style="width:10px;padding:5px;background:#fff;padding-top:130px;">
	 	<a id="btnLeft" title="取消选中" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-left',plain:true"></a>
	 	<a id="btnRight" title="选中" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-right',plain:true"></a>
	 </div>
	 <div id="dgOptionalButtons-toolbar" class="zframe-datagrid-toolbar">
		<table cellpadding="0" cellspacing="0" style="width:100%">
			<tr>
				<td style="text-align:right;padding-right:2px">
					<input style="width:200px;" class="easyui-searchbox" data-options="searcher:doSearch1,prompt:'请输入按钮名称',menu:'#assign_mm'"></input>
					<div id="assign_mm" style="width:80px;">
						<div data-options="name:'name'">按钮名称</div>
					</div>
				</td>
			</tr>
		</table>
	</div>
	<div id="dgSelectedButtons-toolbar" class="zframe-datagrid-toolbar">
		<table cellpadding="0" cellspacing="0" style="width:100%">
			<tr>
				<td style="text-align:right;padding-right:2px">
					<input style="width:200px;" class="easyui-searchbox" data-options="searcher:doSearch2,prompt:'请输入按钮名称',menu:'#assign_mm'"></input>
				</td>
			</tr>
		</table>
	</div>
	 <!--Change Button Text-->
	 <div data-options="region:'south',border:false" style="text-align:center;padding:5px 0;">
	 	<div align="left" style="padding-left:5px;">
	 		<span style="color:red;">注:双击按钮即可添加和删除</span>	
	 	</div>
		<a id="ok" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="ok()">确定</a>
		<a id="cancel" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="cancel()">取消</a>
	</div>
 </div>
  </body>
</html>